{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <style>
        .content{
            margin-top: 0;
            width: 90%;
            height: 700px;

        }
        .info{
            width: 98%;
            margin: 6px auto;
            text-align: center;
            font-size: 24px;
            height: 30px;
            color: black;
            background-color: #46f1d4;

        }
        table {
            width: 100%;
            text-align: left;
            border-collapse:unset;
            border-spacing:15px 15px;

        }
        table tr{
            height: 30px;
        }
        table tr td{
            width: 200px;
        }
        table tr td div{
             border: 2px white solid;
            background-color: #fdf4ff;
            font-size: 14px;

        }

        table tr:hover{
            color: #0bb3f9;
        }
         .title{
            margin-top: 20px;
            width: 28%;
            margin-left: 12px;
            font-size: 18px;
            background-color: #f982f6;
        }
        .strc .two{
            width: 98%;
            position: relative;
            {#height: 80px;#}
            {#border: 1px snow solid;#}
            margin: 10px auto;
            {#background-color: white;#}
            height: 100px;
            border-width: 2px;
            border-color: #B0B0B0;
            border-style: solid;
            border-radius: 5px;
            word-wrap: break-word;
            font-size: 16px;
            background-color: #ffffff;
        }
        .Helix{
    position: absolute;
    display: block;
    height: 10px;
    width: 10px;
    bottom: 20px;
    left: 20px;
    background-color: #26b2ae;

}
 .Hel{
    position: absolute;
    left:30px;
    bottom: 13px;
}
        .Sheet{
    position: absolute;
    display: block;
    height: 10px;
    width: 10px;
    bottom: 20px;
    left: 80px;
    background-color: #8d51b2;
}
 .She{
    position: absolute;
    left:90px;
    bottom: 13px;
}
 .Turn{
    position: absolute;
    display: block;
    height: 10px;
    width: 10px;
    bottom: 20px;
    left: 140px;
    background-color: #1db21a;
}
 .Tur{
    position: absolute;
    left:150px;
    bottom: 13px;
}
 .Coil{
    position: absolute;
    display: block;
    height: 10px;
    width: 10px;
    bottom: 20px;
    left: 190px;
    background-color: #080609;
}
 .Coi{
    position: absolute;
    left:200px;
    bottom: 13px;
}
        .button {
    position: absolute;
    display: block;
    right: 5px;
    bottom: 5px;
    height: 25px;
    font-size:16px;
    font-weight: 400;
            border-width: 2px;
            border-color: #B0B0B0;
            border-style: solid;
            border-radius: 5px;

}
        .button:hover{
            color: #01A9DC;
        }
        .des{
            margin-top: 20px;
            width: 28%;
            margin-left: 12px;
            font-size: 18px;
            color: black;
            background-color: #47f92b;
        }
        .disord{
            width: 98%;
            position: relative;
            {#height: 80px;#}
            {#border: 1px snow solid;#}
            margin: 10px auto;
            {#background-color: white;#}
            height: 100px;
            border-width: 2px;
            border-color: #B0B0B0;
            border-style: solid;
            border-radius: 5px;
            word-wrap: break-word;
            font-size: 16px;
            background-color: #ffffff;

}
     .U{
         color: #04ba04;
     }
        .L{
            color: red;
        }
        .D_line{
    margin-top: 40px;
    height: 50px;
    width: 98%;
    background-color: #01A9DC;
    margin-bottom: 6px;
            margin-left: 12px;


}  .copy{
    text-align: center;
    font-size: 14px;
               line-height: 25px;
            font-weight: 700;
}
    </style>
</head>
<body>
    <header class="container-fluid">
        <img src="{% static 'images/logo.png' %}" alt="PPCsPG" class="img-responsive" id="img">
        <div class="row">
            <nav class="navbar navbar-inverse" id="nav">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                       <a class="navbar-brand" href="/">PPCsPG</a>

                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav  navbar-right navbar-nav">
                            <li class="active"><a href="/" >Home </a></li>
                            <li ><a href="{% url 'browse' %}">Browse</a></li>
                            <li><a href="{% url 'search' %}">Search</a></li>
                            <li><a href="https://www.genome.jp/tools/blast/">Blast</a></li>
                            <li><a href="{% url 'peptide.peptide' %}">Prediction</a></li>
                            <li><a href="{% url 'download' %}">Download</a></li>
                            <li><a href="{% url 'help' %}">Help</a></li>
                      </ul>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="content">
        <div class="info">Basic Imformation</div>
        <div >
            <table   >
                <tbody>
                    <tr>
                        <td align="left" ><strong>Entry ID:</strong></td>
                        <td><div>{{ test.1 }}</div></td>
                    </tr>
                    <tr>
                        <td><strong>Refseq ID:</strong></td>
                        <td><div>{{ test.2 }}</div></td>
                    </tr>
                 <tr>
                        <td><strong>Species:</strong></td>
                        <td><div>{{ test.3 }}</div></td>
                 </tr>
                 <tr>
                        <td><strong>Type:</strong></td>
                        <td><div>{{ test.4 }}</div></td>
                 </tr>
                 <tr>
                        <td><strong>Length:</strong></td>
                        <td><div>{{ test.6 }}</div></td>
                 </tr>
                <tr>
                        <td><strong>Function:</strong></td>
                        <td><div>{{ test.7 }}</div></td>
                 </tr>
                <tr>
                        <td><strong>Location:</strong></td>
                        <td><div>{{ test.8 }}</div></td>
                </tr>
                <tr>
                        <td><strong>GC(%):</strong></td>
                        <td><div>{{ test.5 }}</div></td>
                </tr>
                <tr >
                        <td ><strong>sORFs:</strong></td>
                        <td><div style="width: 1100px;word-wrap: break-word;">{{ test.9 }}</div></td>
                </tr>
                 <tr>
                        <td><strong>Protein sequence:</strong></td>
                        <td><div style="word-wrap: break-word;">{{ test.10 }}</div></td>
                </tr>


            </table>

        </div>
        <div class="info">Predictive Information</div>
        <div class="strc">
            <div class="title">Protein secondary structure prediction:</div>
            <div class="two">
                {{ strc|safe }}
                <input type="button" value="click" class="button">
                <div>
                 <div class="Helix"></div>
                 <div class="Hel">Helix</div>
             </div>
            <div>
                 <div class="Sheet"></div>
                 <div class="She">Sheet</div>
             </div>
            <div>
                 <div class="Turn"></div>
                 <div class="Tur">Turn</div>
             </div>
            <div>
                 <div class="Coil"></div>
                 <div class="Coi">Coil</div>
            </div>
            </div>
        </div>
        <div class="domain">
            <div class="des">  Protein disordered domains prediction :</div>
            <div class="disord">
                {{ domain|safe }}
            </div>
        </div>
             <div class="D_line"> <p class="copy">Copyright@ 山东省生物物理重点实验室  联系电话：0534-8985884   邮箱：swwlzdsys@163.com
<br />实验室地址:山东省德州市德城区大学西路566号 邮政编码:253023</p></div>

    </div>
    <script>

            {#var proseq_T = document.getElementsByClassName('T')#}
            {#var proseq_H=document.getElementsByClassName('H')#}
            {#var proseq_E=document.getElementsByClassName('E')#}
            var strct=document.querySelector('.two');
            var proseq = strct.getElementsByTagName('span');
            var btn = document.querySelector('.button');
            console.log(proseq[1].className)

            btn.onclick = function () {
                for (var i = 0; i < proseq.length; i++) {
                    if (proseq[i].className == 'T') {
                        proseq[i].style.color = '#1db21a';
                    } else if (proseq[i].className == 'H') {
                        proseq[i].style.color = '#26b2ae';
                    } else if(proseq[i].className=='E'){
                        proseq[i].style.color = '#8d51b2';
                    }else
                    {
                         proseq[i].style.color = '#000000';
                    }

                }
            }

        </script>
</body>
</html>